<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="canvasWebgl" width="500" height="500"></canvas>

    <!--顶点着色器-->
    <script id="vertex-shader" type="x-shader/x-vertex">
        void main(){
            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            gl_PointSize = 500.0;
        }
    </script>
    <!--片元着色器-->
    <script id="fragment-shader" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision mediump float;
        #endif
        uniform float u_time;
        void main(){
            gl_FragColor = vec4(abs(sin(u_time)), abs(cos(u_time)), tan(u_time), 1.0);
        }
    </script>
    <script>
        const gl = document.getElementById('canvasWebgl').getContext('webgl');
        // 创建顶点着色器和片元着色器
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        // 获取着色器源码
        const vertexSource = document.getElementById('vertex-shader').innerText;
        const fragmentSource = document.getElementById("fragment-shader").innerText;
        // 绑定着色器源码
        gl.shaderSource(vertexShader, vertexSource);
        gl.shaderSource(fragmentShader, fragmentSource);
        // 编译着色器源码
        gl.compileShader(vertexShader);
        gl.compileShader(fragmentShader);
        // 创建程序对象
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        const uTimeLocation = gl.getUniformLocation(program, 'u_time')

        let t= 0.0;
        const render = () =>{
          t+=0.02;
          gl.uniform1f(uTimeLocation, t);
          // 清除画布， 用一个黑色出刷画布
          gl.clearColor(0.0, 0.0, 0.0, 1.0);
          /**
           * 清空缓冲
           * gl.COLOR_BUFFER_BIT //颜色缓冲区
           * gl.DEPTH_BUFFER_BIT //深度缓冲区
           * gl.STENCIL_BUFFER_BIT //模板缓冲区
           * url：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/clear
           */
          gl.clear(gl.COLOR_BUFFER_BIT);

          // 绘制图元
          gl.drawArrays(gl.POINTS, 0, 1);

          requestAnimationFrame(render)
        }
        render()
    </script>
</body>
</html>